<template>
  <div class="category">
    <el-button
      @click="show_dialog"
      icon="el-icon-circle-plus"
      type="primary"
      round
      >新增资讯分类</el-button
    >
    <!-- 分类列表 -->
    <el-table :data="category" style="width: 100%">
      <el-table-column prop="no" label="序号"> </el-table-column>
      <el-table-column prop="name" label="栏目名称"> </el-table-column>
      <el-table-column prop="description" label="栏目描述"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button
            @click="deleteBy(scope.row.id)"
            icon="el-icon-delete-solid"
            type="danger"
            round
            >删除</el-button
          >
          <el-button
            @click="edit_category(scope.row)"
            icon="el-icon-position"
            type="info"
            round
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 模态框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialog_category"
      width="20%"
      :show-close="false"
    >
      <el-form :model="form_category">
        <el-form-item label="栏目名称" :label-width="formLabelWidth_category">
          <el-input v-model="form_category.name"></el-input>
        </el-form-item>
        <el-form-item label="栏目描述" :label-width="formLabelWidth_category">
          <el-input v-model="form_category.description"></el-input>
        </el-form-item>
        <el-form-item label="序号" :label-width="formLabelWidth_category">
          <el-input v-model="form_category.no"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_category = false">取 消</el-button>
        <el-button type="primary" @click="save_category">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      title: "新增资讯分类",
      dialog_category: false,
      form_category: {},
      formLabelWidth_category: "80px",
    };
  },
  computed: {
    ...mapState("category", ["category"]),
  },
  created() {
    this.findAllCategory();
  },
  // 监听器
  // 当监听的变量发生变化时，执行监听中的代码
  methods: {
    ...mapActions("category", [
      "findAllCategory",
      "saveOrUpdate",
      "delete_category",
    ]),
    // 修改按钮
    edit_category(val) {
      this.title = "修改分类";
      this.dialog_category = true;
      this.form_category = JSON.parse(JSON.stringify(val));
    },
    // 显示模态框
    show_dialog() {
      this.form_category = {};
      this.title = "新增分类";
      this.dialog_category = true;
    },
    // 保存文章
    async save_category() {
      let res = await post("/category/saveOrUpdate", this.form_category);
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.findAllCategory();
      }
      this.dialog_category = false;
    },
    // 删除文章
    deleteBy(id) {
      this.$confirm("是否删除此条记录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let res = await get("/category/deleteById", { id });
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.findAllCategory();
        }
      });
    },
    // 分页查询文章
  },
};
</script>